<template>
    <h1>投资管理</h1>

    <table class="table  table-bordered" border="1">
        <thead>
            <tr>
                <th>投资项目编号</th>
                <th>投资项目名称</th>
                <th>投资项目总金额</th>
                <th>用户已投资金额</th>
                <th>剩余投资金额</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in Info" >
                <td>{{ item.I_Id}}</td>
                <td>{{ item.I_Name }}</td>
                <td>{{ item.I_Budget }}</td>
                <td>{{ item.I_Receive }}</td>
                <td>{{ item.I_Residue }}</td>
                <td>
                    <a href="#" @click="jump(item.UI_Id)">赎回</a>
                </td>
            </tr>
        </tbody>

    </table>


</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';
import {useUserStore} from '../../store/index.ts'
import { useRouter } from 'vue-router';

const router = useRouter()

const Info = ref([{
    I_Id:'',
    I_Name:'',
    I_Budget:'',
    I_Residue:'',
    I_Receive:'',
    UI_Id:'',
}])

const userStore = useUserStore()

console.log(userStore.UId)

onMounted (()=>{
    axios({
        method:'get',
        url:'http://localhost:63517/api/Invest/ShowUserInvestInfo',
        params:{
            Uid:userStore.UId
        }
    })
    .then(res=>{
        console.log(res.data)
        Info.value = res.data
    })
    .catch(err=>{
        console.log(err)
    })
})

const jump = (UI_Id:string)=>{
    router.push({
        name:'AddUserInvestRedeem',
        params:{
            Id:UI_Id
        }
    })
}

</script>